<template>
	<view>
		<cu-custom bgColor="#fff" :isBack="true" textColor="#000000">
			<block slot="backText"></block>
			<block slot="content">报名信息反馈</block>
		</cu-custom>

		<view style="background-color:#FFFFFF;padding-bottom: 50rpx;padding-top: 20rpx;">
			<uni-list-item title="岗位">
				<view class="flex align-center" slot="right">
					<span class="uni-input text-right">{{zhaopindataGangwei}}</span>
				</view>
			</uni-list-item>
			<view class="split_line"></view>
			<uni-list-item title="姓名">
				<view class="flex align-center" slot="right">
					<input class="uni-input text-right" placeholder="请输入姓名" placeholder-style="color:#3694EF"
						v-model="xsjyBackinfo.backinfoStuname" />
					<!-- <text class="iconfont icon-write ml-2"></text> -->
				</view>
			</uni-list-item>
			<view class="split_line"></view>
			<uni-list-item title="手机号">
				<view class="flex align-center" slot="right">
					<input class="uni-input text-right" placeholder="请输入手机号" placeholder-style="color:#3694EF"
						v-model="xsjyBackinfo.backinfoPhonenumber" />
				</view>
			</uni-list-item>
			<view class="split_line"></view>
			<uni-list-item title="区域" @click="showCityPicker">
				<view class="flex align-center" slot="right">
					<!-- <input class="uni-input text-right" placeholder="请选择区域" placeholder-style="color:#3694EF"
						v-model="xsjyBackinfo.backinfoHujixian" /> -->
					<text v-if="!xsjyBackinfo.backinfoHujixian" style="color:#3694EF">请选择区域</text>
					<text v-else >{{xsjyBackinfo.backinfoHujixian}}</text>
					<text class="iconfont icon-jinrujiantou ml-2"></text>
				</view>
			</uni-list-item>
			<view class="split_line"></view>
			<uni-list-item title="性别" @click="changeSex">
				<view class="flex align-center" slot="right">
					<text style="color:#959595">{{sexText}}</text>
					<text class="iconfont icon-jinrujiantou ml-2"></text>
				</view>
			</uni-list-item>
			<uni-list-item title="年龄">
				<view class="flex align-center" slot="right">
					<input class="uni-input text-right" v-model="xsjyBackinfo.backinfoAge" />
					<!-- <text class="iconfont icon-write ml-2"></text> -->
				</view>
			</uni-list-item>
			<view class="split_line"></view>
			<uni-list-item title="民族">
				<view class="flex align-center" slot="right">
					<picker @change="changeMinzu" :value="index" :range="minzuList" range-key="name">
						<text style="color:#959595">{{ minzuList[backinfoMinzu].name }}</text>
						<text class="iconfont icon-jinrujiantou ml-2"></text>
					</picker>
				</view>
			</uni-list-item>
			<view class="split_line"></view>
			<uni-list-item title="身份证号">
				<view class="flex align-center" slot="right">
					<input class="uni-input text-right" placeholder="请输入身份证号" placeholder-style="color:#3694EF"
						v-model="xsjyBackinfo.backinfoSfzNumber" />
					<!-- <text class="iconfont icon-write ml-2"></text> -->
				</view>
			</uni-list-item>
			<view class="split_line"></view>
			<view style="padding: 24rpx 28rpx;">
				<view class="flex  flex-column" style="position: relative;">
					<text style="padding-bottom: 20rpx;">备注信息</text>
					<textarea maxlength=250 @input="sumfontnum" class="yijian-txt"
						v-model="xsjyBackinfo.backinfoFankuiBeizhu" placeholder="请输入您的反馈内容(最多250字)"
						placeholder-style="padding-top: 20rpx; font-size: 26rpx; color:#3694EF;margin-top: 45rpx;"
						style="background-color: #F7FBFF;padding-top: 20rpx;padding-left:15rpx;width: 100%; resize: none;border: none;"></textarea>
					<text style="
					height: 40rpx;
					line-height: 40rpx;
				    color: #3694EF;
				    font-size: 20rpx;
					position: relative;
					right: -625rpx;
					top: -35rpx;">{{fontNum}}/250</text>
				</view>
			</view>
			<view class="py-2 px-2" style="margin-top: 20rpx;">
				<button class="text-white" style="border-radius: 20rpx; border: 0;background-color: #3694EF;width: 80%;"
					type="primary" @click="baomingSubmit">
					立即报名
				</button>
			</view>
			<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker"
				:pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
		</view>
		</view>
	</view>
</template>

<script>
	import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue';
	import mpvueCityPicker from '@/components/uni-ui/mpvue-citypicker/mpvueCityPicker.vue';

	import minzuData from './minzudata.js';
	const sexArray = ['男', '女', '保密'];
	const app = getApp();
	export default {
		components: {
			uniListItem,
			mpvueCityPicker
		},
		data() {
			return {
				fontNum: 0,
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				theme: app.globalData.theme.backgroundColor, //全局颜色变量

				themeColor: '#007AFF', // 区域主题
				cityPickerValueDefault: [28, 0, 0], //区域默认选项
				minzuList: minzuData, //民族数据
				backinfoMinzu: 0, //民族
				zhaopindataGangwei: "", //岗位数据
				xsjyBackinfo: {
					backinfoHujixian: '',
					backinfoSex: 2,
					backinfoMinzu: "",
				},
			}
		},
		computed: {
			sexText() {
				return sexArray[this.xsjyBackinfo.backinfoSex]
			},
		},
		onLoad(option) {
			this.xsjyBackinfo.backinfoZhaopindataId = option.zhaopindataId;
			this.zhaopindataGangwei = option.zhaopindataGangwei;
			// aaa
			this.xsjyBackinfo.backinfoLianluoyuanId = option.lianluoyuanId;
			this.xsjyBackinfo.backinfoMinzu = this.minzuList[this.backinfoMinzu].name;
		},
		// 监听返回
		onBackPress() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel();
				return true;
			}
		},
		// 监听页面卸载
		onUnload() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel();
			}
		},
		methods: {
			// 限制文本框字数
			sumfontnum(e) {
				console.log(e)
				this.fontNum = e.detail.value.length
			},
			// 提交报名
			baomingSubmit() {
				var mPattern = /^1[3456789][0-9]\d{8}$/;
				if (this.xsjyBackinfo.backinfoStuname == '' || this.xsjyBackinfo.backinfoStuname == null || this
					.xsjyBackinfo.backinfoStuname == undefined) {
					uni.showToast({
						title: '姓名不能为空！',
						icon: 'none'
					});
				} else if (this.xsjyBackinfo.backinfoPhonenumber == '' || this.xsjyBackinfo.backinfoPhonenumber == null ||
					this.xsjyBackinfo.backinfoPhonenumber == undefined) {
					uni.showToast({
						title: '手机号不能为空！',
						icon: 'none'
					});
				} else if (!mPattern.test(this.xsjyBackinfo.backinfoPhonenumber)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none',
						duration: 2000
					});
				} else if (this.xsjyBackinfo.backinfoSex == 2 || this.xsjyBackinfo.backinfoSex == null || this.xsjyBackinfo
					.backinfoSex == undefined) {
					uni.showToast({
						title: '性别不能为空',
						icon: 'none'
					});
				} else if (this.xsjyBackinfo.backinfoMinzu == '' || this.xsjyBackinfo.backinfoMinzu == null || this
					.xsjyBackinfo.backinfoMinzu == undefined) {
					uni.showToast({
						title: '民族不能为空',
						icon: 'none'
					});
				} else {
					uni.request({
						url: app.globalData.serve_job_url + 'addBackinfo',
						method: 'GET',
						data: this.xsjyBackinfo,
						success: res => {
							if (res.data.code == 200) {
								uni.showToast({
									icon: 'none',
									title: '报名成功，请耐心等待消息！'
								});
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									});
								}, 1500);
							} else {
								uni.showToast({
									icon: 'none',
									title: '报名失败！请稍后重试...'
								});
							}
						},
						fail: () => {
							uni.showToast({
								icon: 'none',
								title: '网络错误'
							});
						},
					});
				}
			},
			// 显示级联弹框
			showCityPicker() {
				this.$refs.mpvueCityPicker.show();
			},
			// 三级联动的提交事件
			onConfirm(e) {
				this.xsjyBackinfo.backinfoHujixian = e.label;
			},
			// 修改性别
			changeSex() {
				uni.showActionSheet({
					itemList: sexArray,
					success: (res) => {
						this.xsjyBackinfo.backinfoSex = res.tapIndex;
					}
				});
			},
			// 民族
			changeMinzu: function(e) {
				this.backinfoMinzu = e.detail.value;
				this.xsjyBackinfo.backinfoMinzu = this.minzuList[this.backinfoMinzu].name;
			},
		}
	}
</script>

<style>
	Page{
		background-color: #fff;
	}
	.yijian-txt {
		height: 150rpx;
		width: 500rpx;
		border: #969696 thin solid;
	}
	.split_line {
		width: 95%;
		border-bottom: 1rpx solid #F4F4F4;
		margin:0 auto;
	}
</style>